CSS-i kohandatud esiletõstmise sündmuste käsitlemine: teksti valimise interaktsioonide täiustamine

Teksti valimine on veebis põhiline interaktsioon. Kasutajad tõstavad teksti esile mitmel põhjusel: sisu kopeerimiseks, tsitaatide jagamiseks, otsingute tegemiseks või lihtsalt tähelepanu koondamiseks. Kuigi brauserid pakuvad vaikimisi teksti esiletõstmist, pakub CSS-i kohandatud esiletõstmise API enneolematut kontrolli selle interaktsiooni üle, võimaldades arendajatel luua visuaalselt köitvaid, kontekstiteadlikke ja väga juurdepääsetavaid valikukogemusi. See blogipostitus süveneb CSS-i kohandatud esiletõstmise API sügavustesse, uurides selle võimekusi ja pakkudes praktilisi näiteid teie veebirakenduste täiustamiseks.

Vaikimisi teksti valimise käitumise mõistmine

Vaikimisi stiilivad brauserid valitud teksti ::selection pseudo-elemendi abil. Välimuse muutmiseks saate muuta background-color ja color omadusi. Näiteks:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

See lihtne CSS-koodilõik muudab taustavärvi helesiniseks ja tekstivärvi mustaks, kui kasutaja lehel teksti valib. Siiski on ::selection pseudo-elemendil piirangud. See võimaldab stiilida ainult tausta ja värvi, piirates kohandamist. Lisaks puudub sellel semantiline teave valiku konteksti kohta. CSS-i kohandatud esiletõstmise API ületab need piirangud.

Tutvustame CSS-i kohandatud esiletõstmise API-t

CSS-i kohandatud esiletõstmise API pakub robustsemat ja paindlikumat lähenemist teksti valikute haldamiseks. See tutvustab uusi CSS-i omadusi ja JavaScripti API-sid, mis võimaldavad teil määratleda ja stiilida kohandatud esiletõstmisi vastavalt konkreetsetele tingimustele ja interaktsioonidele.

Põhimõisted

• Esiletõstu pärimine: Esiletõstmisi stiilitakse kaskaadi ja pärimise mehhanismi kaudu, sarnaselt teistele CSS-i omadustele. See tähendab, et saate määratleda vaikimisi esiletõstmise stiilid juurtasandil ja neid konkreetsete elementide või kontekstide jaoks üle kirjutada.
• Esiletõstu pseudo: ::highlight() pseudo-elementi kasutatakse stiilide rakendamiseks nimetatud esiletõstudele.
• JavaScripti API: JavaScripti API-d nagu getSelection() ja Highlight objektid võimaldavad teil programmeeritavalt luua, hallata ja suhelda esiletõstudega.
• Juurdepääsetavus: API toetab ARIA atribuute ja juurdepääsetavuse kaalutlusi, tagades, et kohandatud esiletõstud on puuetega kasutajatele tajutavad ja arusaadavad.

Kohandatud esiletõstude rakendamine: Samm-sammuline juhend

Siin on praktiline juhend kohandatud esiletõstude rakendamiseks, kasutades CSS-i kohandatud esiletõstmise API-t:

Samm 1: Nimetatud esiletõstude määratlemine

Esiteks peate CSS-i abil määratlema nimetatud esiletõstu. Seda nime kasutatakse stiilide seostamiseks konkreetsete valikutega.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

Selles näites oleme määratlenud esiletõstu nimega `custom-highlight`, millel on poolläbipaistev punane taust ja must tekstivärv. Tausta ja teksti jaoks saate valida mis tahes kehtiva CSS-i värviväärtuse.

Samm 2: Esiletõstude loomine JavaScriptis

Järgmisena kasutage JavaScripti esiletõstu loomiseks ja rakendamiseks. See hõlmab valitud tekstivahemiku hankimist ja Highlight objekti loomist.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No selection
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Empty selection
  }

  const highlight = new Highlight(range);

  // Register the highlight with the document. It's experimental and may need polyfill or browser flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implement a fallback mechanism here, e.g., wrapping the selected text in a  with a class
    // For example:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}

            

              
                Copy
              
            
          

Selgitus:

• window.getSelection(): Hangib praeguse valiku objekti.
• selection.rangeCount: Kontrollib, kas on olemas aktiivne valik.
• selection.getRangeAt(0): Hangib valitud vahemiku.
• new Highlight(range): Loob vahemikust uue Highlight objekti.
• CSS.highlights.set('custom-highlight', highlight): Registreerib esiletõstu CSS-i esiletõstude registris. See on oluline samm, mis seob JavaScripti esiletõstu varem määratletud CSS-stiilidega.
• Varumehhanism: Sisaldab olulist varumehhanismi brauseritele, mis ei toeta veel täielikult CSS.highlights. See tagab, et teie funktsioon laguneb sujuvalt, säilitades funktsionaalsuse vanemates brauserites.
• selection.removeAllRanges(): Tühjendab valiku pärast esiletõstmist. See on valikuline ja sõltub teie soovitud kasutajakogemusest.

Ärge unustage seda funktsiooni siduda sündmuste kuulajaga, näiteks nupuvajutuse või klaviatuuri otseteega.

Samm 3: Mitme vahemiku käsitlemine (kattuvad valikud)

API suudab käsitleda mitut kattuvat vahemikku ühe esiletõstu sees. Saate lisada Highlight objektile mitu vahemikku:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implement a fallback for multiple ranges (more complex)
  // This would require splitting the text into smaller spans and applying styles
  // This is a more advanced fallback implementation and may not be suitable for all cases
}

            

              
                Copy
              
            
          

Stiil rakendatakse kõigile esiletõstu sees olevatele vahemikele.

Täiustatud kasutusjuhud ja tehnikad

CSS-i kohandatud esiletõstmise API avab laia valiku võimalusi teksti valimise interaktsioonide täiustamiseks. Siin on mõned täiustatud kasutusjuhud ja tehnikad:

1. Kontekstiteadlik esiletõstmine

Saate kasutada JavaScripti valitud teksti analüüsimiseks ja erinevate esiletõstmise stiilide rakendamiseks vastavalt selle sisule või ümbritsevale kontekstile. Näiteks võiksite dokumendis märksõnad esile tõsta kindla värviga või tuvastada ja esile tõsta koodilõike.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Highlight code comments
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback implementation, potentially using data attributes and custom CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Määratlege iga esiletõstmise tüübi jaoks CSS-stiilid:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Otsingutulemuste esiletõstmine

Saate kasutada API-d otsinguterminite esiletõstmiseks dokumendis. See on eriti kasulik otsingutulemuste lehtedel või rakendusesisese otsingufunktsiooni jaoks.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Or specific element
  const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Create a range for each match
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, again, requires careful handling of text nodes
    }
  }
}

            

              
                Copy
              
            
          

Määratlege otsingutulemuste esiletõstmise CSS-stiil:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. Integreerimine Shadow DOM-iga

CSS-i kohandatud esiletõstmise API töötab sujuvalt Shadow DOM-iga, võimaldades teil luua kapseldatud komponente kohandatud esiletõstmise stiilidega. Saate määratleda esiletõstud Shadow DOM-i sees ja rakendada neid komponendi sees olevatele elementidele.

4. Juurdepääsetavuse kaalutlused

Veenduge, et teie kohandatud esiletõstud oleksid kõigile kasutajatele juurdepääsetavad. Kaaluge järgmist:

• Värvikontrastsus: Tagage piisav värvikontrastsus esiletõstu tausta ja tekstivärvi vahel, et täita WCAG juhiseid.
• Klaviatuuriga navigeerimine: Veenduge, et kasutajad saaksid klaviatuuri abil esiletõstetud tekstis navigeerida.
• Ekraanilugeja ühilduvus: Testige oma esiletõstmisi ekraanilugejatega, et tagada valitud teksti korrektne ettelugemine.
• Fookuse indikaatorid: Kui esiletõstetud element saab fookuse, pakkuge selge visuaalne fookuse indikaator.

Saate kasutada ARIA atribuute, et pakkuda esiletõstude kohta täiendavat semantilist teavet. Näiteks võiksite kasutada aria-label atribuuti esiletõstetud jaotise eesmärgi kirjeldamiseks.

5. Lokaliseerimine ja rahvusvahelistamine

Globaalses kontekstis teksti valimisega tegeledes arvestage järgmisega:

• Teksti suund: Veenduge, et teie esiletõstud töötaksid korrektselt nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundadega.
• Keelepõhised reeglid: Olge teadlik keelepõhistest reeglitest teksti valimisel ja sõnapiiridel.
• Fontide tugi: Kasutage fonte, mis toetavad erinevates keeltes kasutatavaid märke.

6. Jõudluse optimeerimine

Kohandatud esiletõstude rakendamine võib mõjutada jõudlust, eriti suurte dokumentide puhul. Kaaluge järgmisi optimeerimistehnikaid:

• Debouncing (viivitamine): Viivitage esiletõstmise funktsiooni, et vältida liigseid arvutusi kiirete valikute ajal.
• Vahemällu salvestamine: Salvestage arvutatud esiletõstmise vahemikud vahemällu, et vältida nende asjatut ümberarvutamist.
• Virtualiseerimine: Kasutage virtualiseerimistehnikaid, et renderdada ainult need esiletõstud, mis on hetkel vaateaknas nähtavad.
• Veebitöölised (Web Workers): Delegeerige esiletõstmise arvutused veebitöölisele, et vältida põhilõime blokeerimist.

Brauseri tugi ja polüfillid

CSS-i kohandatud esiletõstmise API on suhteliselt uus ja kõik brauserid ei pruugi seda täielikult toetada. Enne selle tootmises kasutamist kontrollige uusimaid brauserite ühilduvustabeleid. Kaaluge polüfilli kasutamist, et pakkuda tuge vanematele brauseritele. Polüfill lisab vajaliku koodi, et vanemad brauserid uut API-d mõistaksid. Otsige veebist "CSS Custom Highlight API Polyfill", et leida valikuid.

Kokkuvõte

CSS-i kohandatud esiletõstmise API annab arendajatele võimaluse luua kaasahaaravaid, kontekstiteadlikke ja juurdepääsetavaid teksti valimise kogemusi. Mõistes API võimekusi ja rakendades selles blogipostituses kirjeldatud tehnikaid, saate oma veebirakenduste kasutajakogemust täiustada ja pakkuda kasutajatele intuitiivsemat ning visuaalselt köitvamat viisi tekstiga suhtlemiseks. Pidage meeles, et kohandatud esiletõstude rakendamisel tuleb eelistada juurdepääsetavust ja jõudlust ning arvestada brauserite ühilduvuse ja polüfilli võimalustega. See nüansirikas kontroll teksti valimise üle annab arendajatele võimaluse luua interaktiivsemaid ja kasutajasõbralikumaid veebikogemusi, mis on kohandatud konkreetsetele rakenduse vajadustele ja kasutajate eelistustele. Brauseri toe kasvades tõotab CSS-i kohandatud esiletõstmise API saada kaasaegse veebiarenduse asendamatuks tööriistaks.

Lisalugemist

• MDN Web Docs: Highlight API
• CSS Houdini: Lugege lisateavet CSS Houdini projekti kohta, mis võimaldab neid täiustatud CSS-funktsioone.